<template>
  <div>
    <el-upload
      ref="uploadExcel"
      action="你上传的服务器地址"
      :limit="1"
      :auto-upload="false"
      accept=".xlsx"
      :before-upload="beforeUploadFile"
      :on-change="fileChange"
      :on-exceed="exceedFile"
      :on-success="handleSuccess"
      :on-error="handleError"
      :file-list="fileList"

    >
      <el-button size="small" plain>选择文件</el-button>
      <div slot="tip" class="el-upload__tip">
        只能上传xlsx(Excel2007)文件，且不超过10M
      </div>
    </el-upload>

  </div>
</template>

<script>
  export default {
    name: 'uploadfile',

    data() {
      return {
        file: {},
        fileList: []
      }
    },
    methods: {

      // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
      beforeUploadFile(file) {
        // console.log(file)
        const extension = file.name.substring(file.name.lastIndexOf('.') + 1)
        const size = file.size / 1024 / 1024
        if (extension !== 'xlsx') {
          this.$notify.warning({
            title: '警告',
            message: `只能上传Excel（即后缀是.xlsx）的文件`
          })
        }
        if (size > 10) {
          this.$notify.warning({
            title: '警告',
            message: `文件大小不得超过10M`
          })
        }
      },
      // 文件状态改变时的钩子
      fileChange(file, fileList) {
        // console.log(file)
        // console.log(fileList)
      },
      // 文件超出个数限制时的钩子
      exceedFile(files, fileList) {
        this.$notify.warning({
          title: '警告',
          message: `只能选择 ${
            this.limitNum
          } 个文件，当前共选择了 ${files.length + fileList.length} 个`
        })
      },
      // 文件上传成功时的钩子
      handleSuccess(res, file, fileList) {
        console.log(res)
        // this.formData.url = res.data  //服务器返回的文件地址
        this.$message({
          message: '文件上传成功',
          type: 'success'
        })
        this.$refs.uploadExcel.clearFiles()// 清楚上次上传记录
      },
      // 文件上传失败时的钩子
      handleError(err, file, fileList) {
        this.$message.error(err.msg)
      }
    }
  }

</script>

<style scoped>

</style>
